<template>
  <el-table :data="tableData" highlight-current-row stripe style="width: 100%" size="mini" v-loading = 'showLoading'
    ref="businessTable"
    @selection-change="handleSelectionChange"
  >
      <el-table-column
        type="selection"
        width="50">
      </el-table-column>
     <template v-for = "item in tableHeader">
      <el-table-column
        :label="item.label"
        width='70'
        v-if='item.prop === "name"'
        >
          <template slot-scope="scope">
            <i class="iconfont icon-yiguanzhu" :class="scope.row.follow"></i>
            <i :class="{['icon-chaoshi__' + $i18n.locale]: scope.row.processTimeout}" class="iconfont process-timeout"></i>
            <i :class="{['follow-icon' + (scope.row.laterProcessColor ? scope.row.laterProcessColor : '')]: true}" class="iconfont icon-shaohouchuli" v-show="scope.row.laterProcess"></i>
          </template>
      </el-table-column>
      <el-table-column
        :label="item.label"
        v-if='item.prop === "cascade"'
        >
          <template slot-scope="scope">
            <!-- <el-tooltip :open-delay="150" placement="right" popper-class="card-tooltip" effect="light" transition="fade-leave">
              123456
              <div slot="content" class="card-detail">
                <div class="card-detail-tittle">{{$t('business.businessContent')}}</div>
                <table>
                  <tbody valign="top">
                  <template v-for="(i,index) in scope.row.businessType.detail">
                    <tr class="card-detail-item">
                      <td class="data-name">{{i.name}}</td>
                      <td class="break-all">{{i.value}}</td>
                    </tr>
                  </template>
                  </tbody>
                </table>
              </div >
            </el-tooltip> -->
            <el-tooltip placement="right" popper-class="card-tooltip" effect="light" transition="fade-leave">
              <span @click="previewFun(scope.row)" :class="{isNoEdit: isNoediting}"><i  v-show="scope.row.noRead" class='iconfont icon-yuandian icon-yuandian-color4'></i><span class='business-number'>{{scope.row.businessType.detail[0].value}}</span></span>
              <div slot="content" class="card-detail">
                <div class="card-detail-tittle">{{$t('business.businessContent')}}</div>
                <table>
                  <tbody valign="top">
                  <template v-for="(i,index) in scope.row.businessType.detail">
                    <tr class="card-detail-item">
                      <td class="data-name">{{i.name}}</td>
                      <td class="break-all">{{i.value}}</td>
                    </tr>
                  </template>
                  </tbody>
                </table>
              </div >
            </el-tooltip>
          </template>
      </el-table-column>
      <el-table-column
        :label="item.label"
        v-if='item.prop === "userName"'
        >
          <template slot-scope="scope">
            <div :class="[scope.row.userName.className]" class="fl customer-name" :title="scope.row.userName.name">{{scope.row.userName.name}}</div>
          </template>
      </el-table-column>
      <el-table-column
        :label="item.label"
        v-if='item.prop === "priority"'
        >
          <template slot-scope="scope">
            <i :class="{['icon-yuandian-color' + (scope.row.priority ? scope.row.priority : '')]: true}" class='iconfont icon-yuandian'></i>{{ scope.row.priority | priorityText}}
          </template>
      </el-table-column>
      <el-table-column
        :label="item.label"
        v-if='item.prop === "businessType"'
        >
          <template slot-scope="scope">
            {{scope.row.businessType.name}}
          </template>
      </el-table-column>
      <el-table-column
        :label="item.label"
        v-if='item.prop === "agentAfter"'
        >
          <template slot-scope="scope">
            {{scope.row.agentAfter}}
          </template>
      </el-table-column>
      <el-table-column
        :label="item.label"
        v-if='item.prop === "agentBefore"'
        >
          <template slot-scope="scope">
            {{scope.row.agentBefore}}
          </template>
      </el-table-column>
      <el-table-column
        :label="item.label"
        v-if='item.prop === "createTime"'
        >
          <template slot-scope="scope">
            {{scope.row.createTime}}
          </template>
      </el-table-column>
      <el-table-column
        :label="item.label"
        fixed="right"
        v-if='item.prop === "operation"'
        >
          <template slot-scope="scope">
             <el-button
              type="text"
              :class="{isNoEdit: isNoediting}"
              @click="previewFun(scope.row)"
              size="small">
              查看
            </el-button>
            <el-button
              type="text"
              v-if='scope.row.follow === "none"'
              :class="{isNoEdit: isNoediting}"
              @click='followedSetting(scope.row, "follow")'
              size="small">
              关注
            </el-button>
            <el-button
              type="text"
              :class="{isNoEdit: isNoediting}"
              v-else
              @click='followedSetting(scope.row, "unfollow")'
              size="small">
              <span class="unfollow">取关</span>
            </el-button>
            <el-button
              type="text"
              :class="{isNoEdit: isNoediting}"
              v-if="currentType === 'business_undeal'"
              @click='setTaskToMe(scope.row)'
              size="small">
              领取
            </el-button>
          </template>
      </el-table-column>
     </template>
  </el-table>
</template>
<script>
  import Agent from '@/components/public-modules/cache/Agent'
  export default {
    data () {
      return {
      }
    },
    props: {
      tableData: {
        type: Array,
        default: []
      },
      tableHeader: {
        type: Array,
        default: []
      },
      qu: {
        type: Object,
        default: {}
      }
    },
    filters: {
      priorityText (type) {
        let text = '普通'
        if (type === '2') {
          text = '紧急'
        } else if (type === '3'){
          text = '很紧急'
        }
        return text
      }
    },
    methods: {
      updata (val) {
        this.$emit('operate', val)
      },
      del (val) {
        this.$emit('operate', val)
      },
      previewFun (obj) {
        if (this.isNoediting) {
          return
        }
        if (obj.noRead === true) {
          this.$store.dispatch('readBusiness', {_id: obj._id, menu: this.qu.menu}).then(() => {
            this.$store.dispatch('refreshUndealNum')
          })
          this.$store.commit('business/CHANGE_READ_STATUS', obj._id)
        }
        this.$store.commit('business/SET_BUSINESS_IS_SHOW_BOX', {isShow: true})
        let path = '/index/business/' + this.$store.state.business.currentBusinessType + '/' + obj._id + '/' + (obj.customer || 'no-customer-bus')
        this.$router.push({path: path})
      },
      followedSetting (obj, type) {
        if (this.isNoediting) {
          return
        }
        let agentId = this.$store.state.session.sessionId
        let data = {_id: obj._id, agents: agentId}
        if (type === 'follow') {
          data.type = 'follow'
        } else if (type === 'unfollow') {
          data.type = 'unfollow'
        }
        return this.$store.dispatch('setFollowedAgents', data).then((res) => {
          if (res.success) {
           if (type === 'follow') {
             obj.follow = ''
             this.$message.success(this.$t('business.addFollowedAgents'))
           } else {
             obj.follow = 'none'
             this.$message.success(this.$t('business.deleteFollowedAgents'))
           }
            return true
          } else {
            return false
          }
        })
      },
      setTaskToMe (obj) {
        if (this.isNoediting) {
          return
        }
        let id = obj._id
        this.$store.dispatch('setTaskToMe', id).then(() => {
          this.$message.success('领取成功')
          this.$emit('operate', {type: 'setTask'})
        })
      },
      handleSelectionChange(selection) {
        this.$emit('selectionchange', selection)
      },
      clearSelection() {
        this.$refs.businessTable.clearSelection()
      },
      selectionallClick () {
        this.$refs.businessTable.toggleAllSelection()
      },
      checkAll () {
        this.tableData.forEach(item => {
          this.$refs.businessTable.toggleRowSelection(item, true)
        })
        this.$emit('selectionall')
      }
    },
    computed: {
      currentType () {
        return this.$store.state.business.currentBusinessType
      },
      showLoading () {
        return this.$store.state.business.showLoading
      },
      isNoediting () {
        return this.$store.state.business.isNoediting
      }
    },
    components: {
      Agent
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .isNoEdit > *
    cursor not-allowed !important
  .customer-name
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    width: 120px;
  .unfollow
    color #F07173
  .business-number
    color #54A2E9
    text-decoration underline
    cursor pointer
  .icon-yuandian-color4
    font-size 12px
    margin-left -12px
  .deleteCus
    text-decoration line-through
  .card-detail
    background-color $c-bus-tip
    .card-detail-tittle
      color $cf-gray2
      font-weight bold
      padding-bottom 10px
    .card-detail-item
      line-height 22px
    .data-name
      color $cf-gray4
      min-width 50px
      width 50px
      padding-right 24px
    .break-all
      color $cf-gray2
      word-break break-all
      white-space pre-line
  .data-padding
    padding-top 15px
  .icon-yuandian-color
    color #00A854
  .icon-yuandian-color1
    color #00A854
  .icon-yuandian-color2
    color #4C9EE8
  .icon-yuandian-color3
    color #F04134
  .icon-yuandian-color4
    color #FF6B6B
  .none
    display none
  .process-timeout
    color #D81E06
  .icon-yiguanzhu
    color #F4EA2A
  .icon-shaohouchuli
    color #459AE9
  .follow-icon1
    color $c-pink !important
    display inline-block
  .follow-icon2
    color #E6A23C !important
    display inline-block
  .follow-icon3
    color $c-main !important
    display inline-block
  .follow-icon4
    color #58970f !important
    display inline-block
</style>
<style lang='stylus'>
  .isNoEdit > *
    cursor not-allowed !important
</style>
